import React from 'react';
import { Collapse } from 'antd';
import ControlItems from './ControlItems';

const { Panel } = Collapse;


const ControlPanel = (props) => {

    const { controls = [] } = props;

    return <Collapse defaultActiveKey={['1']} ghost>
        {
            controls.map((category) => {
                return <Panel header={category.name} key={category.id}>
                    <ControlItems list={category.children} />
                </Panel>
            })
        }
    </Collapse>

}


export default ControlPanel;